<template>
	<view class="container">
		<u-swiper :list="banners"  radius="10" imgMode="heightFix" height="350rpx" keyName="image" interval="3000" @change="changeSwiper" @click="click"></u-swiper>
		<!-- <view class="search">
			<u-search placeholder="搜索课题" :showAction="false" v-model="keyword" bgColor="#fff"></u-search>
		</view> -->
		<view class="tabs">
			<u-tabs :list="tabs" @click="handleClickTab" lineHeight="0" :activeStyle="activeStyle"></u-tabs>
		</view>
		<view class="scroll-box">
			<view class="scroll-title">{{ current.course_level_name }}</view>
			<u-scroll-list :indicator="true" indicatorColor="#fff0f0" indicatorActiveColor="#CBE0D9">
				<view class="scroll-list">
					<view v-for="(item, index) in scrollList" :key="index" class="scroll-item"
						:class="'scroll-item-'+(index%3)" @click="toDetail(item)">
						<view class="sub-title" :class="'sub-title-'+(index%3)">{{ item.course_name}}</view>
						<view class="sub-list">
							<view class="item" :class="'font-class-'+(index%3)" v-for="(ite,key) in item.children" :key="key">{{ key+1 }}.{{ ite.course_name }}</view>
						</view>
					</view>
				</view>
			</u-scroll-list>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: {},
				keyword: '',
				banners: [],
				tabs: [],
				current: {},
				scrollList: [],
				activeStyle: {
					backgroundColor:'#d6d5ea',
					height:'72rpx',
					lineHeight:'72rpx',
					fontSize:'28rpx',
					padding:"0 10rpx",
					color: '#fff',
					borderTopLeftRadius:'18rpx',
					borderTopRightRadius:'16rpx',
					borderBottomRightRadius:'28rpx',
					borderBottomLeftRadius:'22rpx',
					transform: 'scale(1.05)',
					boxShadow:'5rpx 5rpx 8rpx #bfc1d7'
				}

			}
		},
		onShareAppMessage(res) {
			return this.$utils.onShareAppMessage();
		},
		onLoad() {
			if (!uni.getStorageSync('token')) {
				this.getCode();
			}
			this.getList();
		},
		methods: {
			async getList() {
				const res = await this.$http.get(`/wechatmini`)

				if (res.code == 0) {
					this.data = res.data;
					this.banners = res.data.banners;
					let tabs = [];
					this.current = this.data.course_levels[0];
					//slice(0,5);
					this.data.course_levels.forEach(item => {
						item.courses.forEach(ite => {
							if (ite.children.length > 5) {
								ite.children = ite.children.slice(0, 5)
							}
						})
					})
					this.scrollList = this.data.course_levels[0].courses;
					this.data.course_levels.forEach(item => {
						tabs.push({
							name: item.course_level_name
						})
					})
					this.tabs = tabs;

				}

			},

			handleClickTab(item) {
				this.current = this.data.course_levels[item.index];
				this.scrollList = this.data.course_levels[item.index].courses;
			},
			changeSwiper() {

			},
			getCode() {
				let self = this;
				//#ifdef MP-WEIXIN
				uni.login({
					success(res) {
						console.log(res)
						self.onLogin(res)
					}
				})
				//#endif
			},
			async onLogin(message) {
				const res = await this.$http.post(`/wechatmini/user/login`, {
					code: message.code
				});
				uni.setStorageSync('token', res.data.api_token)
				uni.setStorageSync('openid', res.data.openid)
			},
			toDetail(item) {
				uni.navigateTo({
					url: `/pages/detail/index?id=${item.course_id}`
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #f7f7f7;
	}
</style>
<style scoped lang="scss">
	.container {
		padding: 20rpx;

		// swiper-item {
		// 	border-radius: 10rpx;

		// 	image {
		// 		border-radius: 10rpx;
		// 	}
		// }

		.search {
			position: relative;
			z-index: 999;
			margin-top: -30rpx;
			padding: 0 60rpx;
		}

		.tabs {
			margin: 0 60rpx;
			margin-top: 30rpx;
			background-color: #e8e8e8;
			border-radius: 50rpx;
		}

		.scroll-box {
			margin-top: 30rpx;
			border-raidus: 10rpx;
			background-color: #e8e8e8;
			border-radius: 10rpx;
			padding-bottom: 30rpx;

			.scroll-title {
				padding: 30rpx 0;
				margin-left: 30rpx
			}
			
			.scroll-list {
				display: flex;
				padding: 0 15rpx;

				.scroll-item {
					width: 240rpx;
					margin: 0 15rpx;
					padding: 20rpx;
					background-color: #CBE0D9;
					border-radius: 10rpx;
					.sub-title {
						width: 240rpx;
						position: relative;
						color: #fff;
						padding: 15rpx 0;
						background-color: #CBE0D9;
						background-image: url();
						font-weight: 600;
						text-align: center;
						white-space:nowrap;
						overflow:hidden;
						text-overflow:ellipsis;
					}

					.sub-list {
						overflow: auto;
						.item {
							margin-top: 10rpx;
							line-height: 2;
							font-size: 28rpx;
							width:auto;
						}
						.font-class-0{
							color: #fff;
							 text-shadow: #88a69c 0px 2px,
							 			#88a69c 2px 0px,
							 			#88a69c 1rpx 0px,
							 			#88a69c 0px -1rpx,
							 			#88a69c 1rpx -1rpx,
							 			#88a69c 1.4px 1.4px,
							 			#88a69c 1px -1rpx,
							 			#88a69c -1rpx 2rpx;
						}
						.font-class-1{
							color: #fff;
							 text-shadow: #768290 0px 2px,
										 #768290 2px 0px,
										 #768290 1rpx 0px,
										 #768290 0px -1rpx,
										 #768290 1rpx -1rpx,
										 #768290 1.4px 1.4px,
										 #768290 1px -1rpx,
										 #768290 -1rpx 2rpx;
						}
						.font-class-2{
							color: #fff;
							text-shadow: #ba9eb5 0px 2px,
										#ba9eb5 2px 0px,
										#ba9eb5 1rpx 0px,
										#ba9eb5 0px -1rpx,
										#ba9eb5 1rpx -1rpx,
										#ba9eb5 1.4px 1.4px,
										#ba9eb5 1px -1rpx,
										#ba9eb5 -1rpx 2rpx;
						}
					}

					.sub-title-0 {
						background-color: #88a69c;
						background:  url('http://qiniu.disciplineeducation.com/studyIcons/home-title-bg1.png') no-repeat;
						background-size: 100%;
					}

					.sub-title-1 {
						background-color: #768290;
						background:  url('http://qiniu.disciplineeducation.com/studyIcons/home-title-bg2.png') no-repeat;
						background-size: 100%;
					}

					.sub-title-2 {
						background-color: #ba9eb5;
						background:  url('http://qiniu.disciplineeducation.com/studyIcons/home-title-bg3.png') no-repeat;
						background-size: 100%;
					}

					.sub-list-1 {}

					.sub-list-2 {}
				}

				.scroll-item-0 {
			 	background-color: #cbe0d9;
				}

				.scroll-item-1 {
					background-color: #d0d7dd;
				}

				.scroll-item-2 {
					background-color: #d5d1e0;
				}
			}
		}


	}
</style>
